import React from 'react'
import { NavBar, Space, Card, Toast, Ellipsis } from 'antd-mobile'
import { SearchOutline, MoreOutline, CloseOutline, AntOutline, RightOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import './comm.css'
import icon1 from "../../assets/icon/common_icon_agree_n.png"
import icon11 from "../../assets/icon/common_icon_agree_s.png"
import icon2 from "../../assets/icon/common_icon_disagree_n.png"
import icon22 from "../../assets/icon/common_icon_disagree_s.png"
import icon3 from "../../assets/icon/comment_list_icon_adoption_n.png"
import icon33 from "../../assets/icon/comment_list_icon_adoption_s.png"
const content =
    '蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。'
const index = () => {
    const navigate = useNavigate()
    // 跳转病友圈
    const back = () => {
        navigate('/PatientCircle')
    }
    const onClick = () => {
        Toast.show('点击了卡片')
    }

    const onHeaderClick = () => {
        Toast.show('点击了卡片Header区域')
    }

    const onBodyClick = () => {
        Toast.show('点击了卡片Body区域')
    }
    return (
        <div className='box'>
            <nav>
                <NavBar onBack={back}>评论列表</NavBar>
            </nav>
            <main>
                <div className='box-con'>
                    <Card
                        title={
                            <div className='header'>
                                <img src="" alt="" />
                                <p>小妮子</p>
                            </div>
                        }
                        onBodyClick={onBodyClick}
                        onHeaderClick={onHeaderClick}
                        style={{ borderRadius: '16px' }}
                    >
                        <div className='content'>
                            <Ellipsis direction='end' rows={5} content={content} />
                        </div>
                        <div className='footer' onClick={e => e.stopPropagation()}>
                            <div className='footer-left'>
                                <p>07/04/02</p>
                            </div>
                            <div className='footer-rigth'>
                                <p><img src={icon1} alt="" />90</p>
                                <p><img src={icon2} alt="" />5</p>
                                <p><img src={icon3} alt="" />采纳</p>
                            </div>
                        </div>
                    </Card>
                </div>
                <div className='box-con'>
                    <Card
                        title={
                            <div className='header'>
                                <img src="" alt="" />
                                <p>小妮子</p>
                            </div>
                        }
                        onBodyClick={onBodyClick}
                        onHeaderClick={onHeaderClick}
                        style={{ borderRadius: '16px' }}
                    >
                        <div className='content'>
                            <Ellipsis direction='end' rows={5} content={content} />
                        </div>
                        <div className='footer' onClick={e => e.stopPropagation()}>
                            <div className='footer-left'>
                                <p>07/04/02</p>
                            </div>
                            <div className='footer-rigth'>
                                <p><img src={icon1} alt="" />90</p>
                                <p><img src={icon2} alt="" />5</p>
                                <p><img src={icon3} alt="" />采纳</p>
                            </div>
                        </div>
                    </Card>
                </div>
                <div className='box-con'>
                    <Card
                        title={
                            <div className='header'>
                                <img src="" alt="" />
                                <p>小妮子</p>
                            </div>
                        }
                        onBodyClick={onBodyClick}
                        onHeaderClick={onHeaderClick}
                        style={{ borderRadius: '16px' }}
                    >
                        <div className='content'>
                            <Ellipsis direction='end' rows={5} content={content} />
                        </div>
                        <div className='footer' onClick={e => e.stopPropagation()}>
                            <div className='footer-left'>
                                <p>07/04/02</p>
                            </div>
                            <div className='footer-rigth'>
                                <p><img src={icon1} alt="" />90</p>
                                <p><img src={icon2} alt="" />5</p>
                                <p><img src={icon3} alt="" />采纳</p>
                            </div>
                        </div>
                    </Card>
                </div>
                <div className='box-con'>
                    <Card
                        title={
                            <div className='header'>
                                <img src="" alt="" />
                                <p>小妮子</p>
                            </div>
                        }
                        onBodyClick={onBodyClick}
                        onHeaderClick={onHeaderClick}
                        style={{ borderRadius: '16px' }}
                    >
                        <div className='content'>
                            <Ellipsis direction='end' rows={5} content={content} />
                        </div>
                        <div className='footer' onClick={e => e.stopPropagation()}>
                            <div className='footer-left'>
                                <p>07/04/02</p>
                            </div>
                            <div className='footer-rigth'>
                                <p><img src={icon1} alt="" onClick={()=>Thumbsup}/>90</p>
                                <p><img src={icon2} alt="" />5</p>
                                <p><img src={icon3} alt="" />采纳</p>
                            </div>
                        </div>
                    </Card>
                </div>
                <div className='box-con'>
                    <Card
                        title={
                            <div className='header'>
                                <img src="" alt="" />
                                <p>小妮子</p>
                            </div>
                        }
                        onBodyClick={onBodyClick}
                        onHeaderClick={onHeaderClick}
                        style={{ borderRadius: '16px' }}
                    >
                        <div className='content'>
                            <Ellipsis direction='end' rows={5} content={content} />
                        </div>
                        <div className='footer' onClick={e => e.stopPropagation()}>
                            <div className='footer-left'>
                                <p>07/04/02</p>
                            </div>
                            <div className='footer-rigth'>
                                <p><img src={icon1} alt="" />90</p>
                                <p><img src={icon2} alt="" />5</p>
                                <p><img src={icon3} alt="" />采纳</p>
                            </div>
                        </div>
                    </Card>
                </div>
            </main>
        </div>
    )
}

export default index